<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    ul {
        list-style: none;
        margin: 200px;
        font-size: 0;
    }
    .drag {
        font-size: 16px;
        width: 100px;
        height: 40px;
        border: 1px solid #999;
        background: #EA6E59;
        margin: 2px 0;
        border-radius: 10px;
        padding-left: 10px;
        color: white;
        cursor: move;
    }
    </style>
</head>
<body>
    <ul id="container">
        <li class="drag" draggable="true">drag1</li>
        <li class="drag" draggable="true">drag2</li>
        <li class="drag" draggable="true">drag3</li>
        <li class="drag" draggable="true">drag4</li>
        <li class="drag" draggable="true">drag5</li>
        <li class="drag" draggable="true">drag6</li>
        <li class="drag" draggable="true">drag7</li>
        <li class="drag" draggable="true">drag8</li>
        <li class="drag" draggable="true">drag9</li>
        <li class="drag" draggable="true">drag10</li>
    </ul>

    <script>
        let drag = document.querySelectorAll('li')
        let container = document.querySelector('#container')
        let draging = null;

         container.addEventListener('dragstart',(e)=>{
            e.dataTransfer.setData('text',e.target.innerText)
            draging = e.target 
        })
        

        container.addEventListener('dragover',(e)=>{

        //     //获取初始位置
        // let targetRect = target.getBoundingClientRect()
        // let dragingRect = draging.getBoundingClientRect()

        // // 交换位置后再次获取
        // let targetAfter = target.getBoundingClientRect()
        // let dragingAfter = target.getBoundingClientRect()

        // target.style.transition = "none"
        // target.style.transform = 'tanslate3d('+
        //         (targetRect.left - targetAfter.left) + 'px,'+
        //         (targetRect.top - targetAfter.top) + 'px,0)'

        // target.offsetWidth ; //重绘
        // target.style.transition = 'all 300ms'
        // target.style.transform = ' translate3d(0,0,0)'

        // // 清空
        // clearTimeout(target.animated)
        // target.animated = setTimeout(() => {
        //     target.style.transition = ''
        //     target.style.transform = ''
        //     target.animated = false
        // }, ms);

            e.preventDefault();
            let target = e.target

            if(target.nodeName = 'li' && target!=draging){
                if(_index(draging) < _index(target) ){
                    target.parentNode.insertBefore(draging,target.nextSibling)
                }else{
                    target.parentNode.insertBefore(draging,target)
                }
            }
        })
        container.addEventListener('drop',(e)=>{

        })
        //获取当前位置
        function _index(el) {
            let index = 0;
            if(!el || !el.parentNode){
                return -1
            }
            while(el && (el = el.previousElementSibling)){
                index++
            }
            return index
        }
    </script>
</body>
</html>